<template>
  <div class="address">
<header-bar :text="title" :left="left" ></header-bar>
<div class="addr-content">
  <div class="addr-list" v-if="addrList.length > 0">
    <div v-for="(item,key) in addrList" :key="key" style="margin-bottom:5px;">
      <div class="addr-li" >
        <!-- <router-link :to="{path:'/updateAddr/'+item.id}"> -->
          <p class="type-item" style="color:#353535">币种：<span style="color:#666">{{item.coinType}}</span></p>
          <p class="addree-item"><span style="display:inline-block;">地址：</span><span style="width: 87%;color:#666;">{{item.address}}</span></p>
        <!-- </router-link> -->
      </div>
      <div class="tool">
          <div class="" @click="del(item.id)">
            <img src="../../assets/del.png" alt="">
            <span>删除</span>
          </div>
          <div class="" @click="edit(item.id)">
            <img src="../../assets/edit.png" alt="">
            <span>编辑</span>
          </div>
        </div>
    </div>
  </div>
  <!-- <div class="noData" v-else>暂无数据</div> -->
    <div class="addaddr_btn" @click="goaddaddress()">
      添加地址
    </div>
    <div class="addr_wxts">
      <b>温馨提示：</b>
      <p>1、该地址仅作为核实充币记录。</p>
	  <p>2、出错奖会原路返回出错奖会原路返回出错奖会原路返回</p>
    </div>
</div>
<confirm @ok="ok" @canle='canle'></confirm>
  </div>
</template>
<script>
import { Header, MessageBox, Popup, Toast } from "mint-ui";

import confirm from "../main/confirm";
import { userAddrs } from "../../api/api.js";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import headerBar from '../main/header'
export default {
  name: "Address",
  data() {
    return {
		msg: "",
		addrList: [],
		showStatus: false,
		id:"",
		title: "关联地址",
		left: {
				status: true
		},
    };
  },
  components: {
	confirm,
	headerBar
  },
  computed: {
    ...mapState(["pageInfo"])
  },
  methods: {
    ...mapMutations(["SHOWPOP", "HIDEPOP"]),
    edit(id) {
      this.$router.push({ path: "/addAddr", query: { id: id } });
    },
    ok() {
		let para = {
			id : this.id
		}
		this.$ajaxPost("delAddr", para).then(res => {
			Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
			this.getuserAddrs();
		});
	},
    canle() {},
    del(id) {
		this.id = id;
      	this.SHOWPOP();
    },
    getuserAddrs() {
      let para = {
        id: this.pageInfo.userinfo.id
      };
      this.$ajaxGet("addressList", para).then(res => {
        this.addrList = res.data;
      });
    },
    goaddaddress() {
      this.$router.push({ path: "/addAddr" });
    }
  },
  mounted() {
	  
    this.getuserAddrs();
    console.log(this.pageInfo);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../../static/css/address.css");
</style>
